<template>
<div class="pay">
    <Header></Header>
    <div class="step">
    <el-steps :active="index" align-center space="200px">
        <el-step title="1.确认订单"></el-step>
        <el-step title="2.付款" ></el-step>
        <el-step title="3.收货"></el-step>
        <el-step title="4.双方互评" ></el-step>
    </el-steps>
    </div>
    <div class="step-1" v-if="index === 1">
    <div class="order">
      <el-table
        :data="list"
        tooltip-effect="dark"
        style="width: 100%; padding-bottom: 20px"
        :key="index"
      >
        <el-table-column label="商品信息" align="center">
          <template slot-scope="scope">
            <div class="wrapper">
              <img :src="`http://localhost:8080/api/v1/images/${scope.row.imageDir}/thumbnail.jpg`" alt="" />
              <span>{{ scope.row.item.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="单价" align="center">
          <template slot-scope="scope">￥{{ scope.row.item.price }}</template>
        </el-table-column>
        <el-table-column label="数量" align="center">
          <template slot-scope="scope">{{ scope.row.amount }}</template>
        </el-table-column>
        <el-table-column label="总价" align="center">
          <template slot-scope="scope"
            >￥{{ (scope.row.item.price * scope.row.amount) | rounding }}</template
          >
        </el-table-column>
      </el-table>
    </div>
    <div class="box">
      <span>实付款：<span style="color:#f40">￥{{priceTotal | rounding}}</span></span>
      <span>用户：{{userInfo.username}}</span>
      <div class="button" @click="submit()">提交订单</div>
    </div>
    </div>
    <div class="step-2" v-if="index === 2">
      <span>实付款：￥{{priceTotal | rounding}}</span>
      <span>用户：{{userInfo.username}}</span>
      <span>余额：￥{{userInfo.balance}}</span>
      <div class="button-group">
      <div class="button" @click="pay()">确认付款</div>
      <div class="button" @click="cancel()">取消订单</div>
      </div>
    </div>
    <div class="step-3" v-if="index === 3">
    <div style=" text-align: center;">
      <i class="el-icon-success" style="margin-top:100px;color: rgb(252, 133, 89);font-size: 75px"></i>
      <p align="center" style="font-size: 20px;font-weight:bold;color: #6C6C6C;line-height:60px">订单支付成功，等待收货</p>
      <p align="center" style="color: darkgray;line-height: 40px">我们将尽快为您发货，收货期间请保持手机畅通</p>
      <el-button style="margin-left: 650px;margin-top: 50px;width: 200px;background-color: rgb(252, 133, 89);color: white" @click="toIndex()">返回首页</el-button>
    </div>
    </div>
</div>
</template>

<script>
import Header from '@/components/Header.vue'

export default {
  components: {
    Header
  },
  data () {
    return {
      index: 1,
      list: [],
      userInfo: {},
      priceTotal: 0,
      order: '',
      status: [
        'CREATED',
        'PAID',
        'SHIPPED',
        'ARRIVED',
        'RECEIVED',
        'RECEIVING',
        'COMPLETED',
        'REFUNDING',
        'FAIL_PAID',
        'FAIL_SHIP',
        'FAIL_ARRIVE',
        'FAIL_RECEIVE',
        'REFUNDED'
      ]
    }
  },
  filters: {
    rounding (val) {
      return val.toFixed(2)
    }
  },
  mounted () {
    this.userInfo = JSON.parse(this.$cookie.get('userInfo'))
    if (this.$route.params) {
      this.list = this.$route.params.list
      for (let i = 0; i < this.list.length; i++) {
        this.priceTotal += this.list[i].item.price * this.list[i].amount
      }
    }
  },
  methods: {
    changeStatusToNumber () {
      for (let i = 0; i < this.status.length; i++) {
        if (this.status[i] === this.order.status) {
          this.order.status = i
          break
        }
      }
    },
    submit () {
      const order = {
        orderId: null,
        userId: this.userInfo.userId,
        status: 0,
        time: '2021-09-08T01:10:42.000+00:00',
        order_has_items: this.list
      }
      this.$http.post('order', JSON.stringify(order), {
        params: {
          userId: this.userInfo.userId
        }
      }).then((res) => {
        console.log(res)
        this.order = res.data
        this.changeStatusToNumber()
      }).catch((err) => {
        console.log(err.response)
      })
      this.index = 2
    },
    pay () {
      if (this.userInfo.balance < this.priceTotal) {
        alert('余额不足！')
        this.$http.put('order', null, {
          params: {
            userId: this.userInfo.userId,
            orderId: this.order.orderId,
            action: 10,
            status: this.order.status
          }
        }).then((res) => {
          console.log(res)
          this.changeStatusToNumber()
        })
        this.$router.push('Cart')
      } else {
        this.index = 3
        this.$http.put('order', null, {
          params: {
            userId: this.userInfo.userId,
            orderId: this.order.orderId,
            action: 11,
            status: this.order.status
          }
        }).then((res) => {
          console.log(res)
          this.changeStatusToNumber()
        })
        for (let i = 0; i < this.list.length; i++) {
          this.$http.delete('cart', {
            params: {
              userId: this.userInfo.userId,
              itemId: this.list[i].item.itemId
            }
          }).then((res) => {
            console.log(res)
            this.changeStatusToNumber()
          }).catch((err) => {
            console.log(err.response)
          })
        }
        this.$http.put(`users/${this.userInfo.userId}`, {
          userId: this.userInfo.userId,
          balance: this.userInfo.balance - this.priceTotal,
          password: this.userInfo.password,
          type: 2,
          email: this.userInfo.email,
          username: this.userInfo.username,
          name: this.userInfo.name
        }).then((res) => {
          console.log(res.data)
          this.$cookie.set('userInfo', JSON.stringify(res.data))
        }).catch((err) => {
          console.log(err.response)
        })
      }
    },
    cancel () {
      this.$http.put('order', null, {
        params: {
          userId: this.userInfo.userId,
          orderId: this.order.orderId,
          action: 10,
          status: this.order.status
        }
      }).then((res) => {
        console.log(res)
        this.changeStatusToNumber()
      })
      this.$router.push('/Cart')
    },
    toIndex () {
      this.$router.push('/')
    }
  }
}
</script>

<style lang="less" scoped>
.step {
  margin-top: 30px;
  /deep/ .el-step__head.is-finish{
      color: #f40;
      border-color: #f40;
  }
  /deep/ .el-step__title.is-finish{
      color: #f40;
  }
}
.order {
 width: 80%;
 margin: 30px auto;
}
.box {
    width: 400px;
    height: 100px;
    border: 2px solid #f40;
    margin-left: 60%;
    position: relative;
    span {
        display: inline-block;
        margin: 10px;
    }
    .button {
        position: absolute;
        right: 0;
        top: 106px;
        width: 100px;
        height: 50px;
        font-size: 20px;
        text-align: center;
        line-height: 50px;
        border-radius: 20px;
        background-color: #f40;
        color: white;
    }
}
.step-2 {
    width: 50%;
    height: 200px;
    margin: 30px auto;
    padding: 50px;
    background-color: rgb(248, 219, 209);
    span {
      display: block;
      margin: 20px;
    }
    .button-group {
        width: 300px;
        display: flex;
        justify-content: space-between;
        text-align: center;
        .button {
            width: 100px;
            height: 50px;
            color: white;
            text-align: center;
            line-height: 50px;
          background-color: rgb(252, 133, 89);
          border-radius: 20px;
          cursor: pointer;
        }
    }
}
</style>
